<template>
  <div style="margin:8px 0 0 47px;">
    <div class="second">
      <div class="secondbox" :key="index" v-for="(item,index) in commendChild">
        <div>
          <div class="first">
            <img v-if="item.userinfo && item.userinfo.user_img" :src="item.userinfo.user_img" alt />
            <img v-else src="../../assets/default_img.jpg" alt />
            <div class="detail">
              <p class="user" v-if="item.userinfo.name">{{item.userinfo.name}}</p>
              <p class="user" v-else>此用户无姓名</p>
              <p class="date">{{item.comment_date}}</p>
              <div>
                <span v-if="!temp" class="secondcontent">
                  {{item.comment_content}}
                  <a
                    class="publish"
                    @click="replyComment(item.comment_id)"
                  >回复</a>
                </span>
                <span v-else class="secondcontent">
                  回复
                  <i style="color: #5090cc">{{item.parent_user_info.name}}</i>
                  : {{item.comment_content}}
                  <a
                    class="publish"
                    @click="replyComment(item.comment_id)"
                  >回复</a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <second-child
            style="margin:0"
            @postChild="postChild"
            :commendChild="item.child"
            :temp="true"
          ></second-child>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {}
  },
  created() {},
  methods: {
    replyComment(id) {
      this.$emit('postChild', id)
      this.$emit('publishChild', id)
    },
    postChild(id) {
      this.replyComment(id)
      this.$emit('publishChild', id)
    },
  },
  name: 'secondChild',
  props: ['commendChild', 'temp'],
}
</script>


<style lang="stylus" scoped>.secondbox {
  display: flex;
  flex-direction: column;
  border-radius: 1.067vw;
  font-size: 4.167vw;
  color: #212121;
}

.secondbox div {
  flex: 1;
}

.secondbox>div {
  display: flex;
  flex: 1;
  padding: 2.778vw 0 0 0;
  background: #f4f4f4;
  width: 100%;
  border-radius: 1.06667vw;
}

.name {
  color: #5090cc;
}

.first {
  padding: 0 3.889vw 0 3.333vw;
  display: flex;
}

.first img {
  width: 9.444vw;
  height: 9.444vw;
  border-radius: 50%;
  margin-right: 4.167vw;
}

.user {
  font-size: 4.167vw;
  color: #757575;
}

.date {
  font-size: 3.611vw;
  margin: 1.944vw 0;
  color: #757575;
}

.content {
  font-size: 4.167vw;
  color: #212121;
  white-space: pre-line;
  word-break: break-word;
}

.secondbox div {
  position: relative;
}

.detail div {
  width: 100%;
}

.publish {
  position: absolute;
  right: 4.167vw;
  bottom: 12.222vw;
  font-size: 3.889vw;
  color: #fb7299;
}
</style>
